<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Lazy Load Tree Nodes - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Lazy Load Tree Nodes</h2>
<p>Get full hierarchical tree data but lazy load nodes level by level.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
	<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',loadFilter:myLoadFilter"></ul>
</div>
<script>
	function myLoadFilter(data, parent) {
		var state = $.data(this, 'tree');

		function setData() {
			var serno = 1;
			var todo = [];
			for (var i = 0; i < data.length; i++) {
				todo.push(data[i]);
			}
			while (todo.length) {
				var node = todo.shift();
				if (node.id == undefined) {
					node.id = '_node_' + (serno++);
				}
				if (node.children) {
					node.state = 'closed';
					node.children1 = node.children;
					node.children = undefined;
					todo = todo.concat(node.children1);
				}
			}
			state.tdata = data;
		}

		function find(id) {
			var data = state.tdata;
			var cc = [data];
			while (cc.length) {
				var c = cc.shift();
				for (var i = 0; i < c.length; i++) {
					var node = c[i];
					if (node.id == id) {
						return node;
					} else if (node.children1) {
						cc.push(node.children1);
					}
				}
			}
			return null;
		}

		setData();

		var t = $(this);
		var opts = t.tree('options');
		opts.onBeforeExpand = function (node) {
			var n = find(node.id);
			if (n.children && n.children.length) {
				return
			}
			if (n.children1) {
				var filter = opts.loadFilter;
				opts.loadFilter = function (data) {
					return data;
				};
				t.tree('append', {
					parent: node.target,
					data: n.children1
				});
				opts.loadFilter = filter;
				n.children = n.children1;
			}
		};
		return data;
	}
</script>
</body>
</html>